<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus'
import { ref, computed } from 'vue'
import { ModalShowType } from '@/types/common'
import { type FormData, type ApiResponseBo, type ApiErrorCodeBo } from '@/api/api-manage/create'
import useDictStore from '@/store/modules/dict'
import ReturnParamForm from './define-interface/ReturnParamForm.vue'
import ReturnParamTable from './define-interface/ReturnParamTable.vue'
import ErrorParamForm from './define-interface/ErrorParamForm.vue'
import ErrorParamTable from './define-interface/ErrorParamTable.vue'
import { useToggle } from '@vueuse/core'

const props = defineProps<{
  formData: FormData
}>()

const emit = defineEmits<{
  (e: 'update:formData', type: FormData): void
  (e: 'next'): void
  (e: 'previous'): void
}>()

const formData = computed({
  get() {
    return props.formData
  },
  set(value) {
    emit('update:formData', value)
  },
})
const dictStore = useDictStore()
const { api_response_type } = dictStore.getDicts('api_response_type')

const dialogReturnFormMode = ref(ModalShowType.Hide)
const editReturnRowIndex = ref(-1)
function onDialogReturnFormSubmit(data: ApiResponseBo) {
  if (dialogReturnFormMode.value === ModalShowType.New) {
    formData.value.apiResponseList.push(data)
  }
  if (dialogReturnFormMode.value === ModalShowType.Edit) {
    formData.value.apiResponseList[editReturnRowIndex.value] = data
  }
  dialogReturnFormMode.value = ModalShowType.Hide
}

const dialogErrorFormMode = ref(ModalShowType.Hide)
const editErrorRowIndex = ref(-1)
function onDialogErrorFormSubmit(data: ApiErrorCodeBo) {
  if (dialogErrorFormMode.value === ModalShowType.New) {
    formData.value.apiErrorCodeBoList.push(data)
  }
  if (dialogErrorFormMode.value === ModalShowType.Edit) {
    formData.value.apiErrorCodeBoList[editErrorRowIndex.value] = data
  }
  dialogErrorFormMode.value = ModalShowType.Hide
}

const formRef = ref<FormInstance>()

const rules: FormRules = {
  responseType: [{ required: true, message: '必填' }],
  responseExampleValue: [{ required: true, message: '必填' }],
}

function onFinish() {
  formRef.value.validate((isValid) => {
    if (!isValid) return

    emit('next')
  })
}
</script>

<template>
  <div>
    <el-form ref="formRef" label-width="200px" :model="formData" :rules="rules">
      <el-form-item label="返回结果类型" prop="responseType">
        <el-select v-model="formData.responseType" placeholder="请选择">
          <el-option
            v-for="item in api_response_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="返回结果示例" prop="responseExampleValue">
        <el-input
          v-model="formData.responseExampleValue"
          show-word-limit
          type="textarea"
          placeholder="请输入返回结果示例"
          resize="none"
          :rows="5"
          :maxlength="300"
        />
      </el-form-item>
      <el-form-item label="返回响应参数">
        <return-param-table
          :data="formData.apiResponseList"
          @delete="
            (index: number) => {
              formData.apiResponseList.splice(index, 1)
            }
          "
          @edit="
            (index: number) => {
              editReturnRowIndex = index
              dialogReturnFormMode = ModalShowType.Edit
            }
          "
        />
        <div class="my-4">
          <el-button class="w-full" @click="dialogReturnFormMode = ModalShowType.New"
            >新增</el-button
          >
        </div>
      </el-form-item>
      <return-param-form
        v-model:modal-show="dialogReturnFormMode"
        :form-data="
          dialogReturnFormMode == ModalShowType.Edit
            ? formData.apiResponseList[editReturnRowIndex]
            : null
        "
        @submit="onDialogReturnFormSubmit"
      />
      <el-form-item label="失败结果示例" prop="responseFailValue">
        <el-input
          v-model="formData.responseFailValue"
          show-word-limit
          type="textarea"
          placeholder="请输入失败结果示例"
          resize="none"
          :rows="5"
          :maxlength="300"
        />
      </el-form-item>
      <el-form-item label="错误代码定义">
        <error-param-table
          :data="formData.apiErrorCodeBoList"
          @delete="
            (index: number) => {
              formData.apiErrorCodeBoList.splice(index, 1)
            }
          "
          @edit="
            (index: number) => {
              editErrorRowIndex = index
              dialogErrorFormMode = ModalShowType.Edit
            }
          "
        />
        <div class="my-4">
          <el-button class="w-full" @click="dialogErrorFormMode = ModalShowType.New"
            >新增</el-button
          >
        </div>
      </el-form-item>
      <error-param-form
        v-model:modal-show="dialogErrorFormMode"
        :form-data="
          dialogErrorFormMode == ModalShowType.Edit
            ? formData.apiErrorCodeBoList[editErrorRowIndex]
            : null
        "
        @submit="onDialogErrorFormSubmit"
      />
    </el-form>
    <div class="my-4">
      <el-button type="primary" @click="$emit('previous')">上一步</el-button>
      <el-button type="primary" @click="onFinish">完成</el-button>
    </div>
  </div>
</template>
